<template>
    <div class="xx">
        <div class="wrapper">
            <div class="xxhw">
                <div class="top">
                    <p class="tit">新鲜好物<span>新鲜出炉</span><span>品质靠谱</span></p>
                    <p class="all">查看全部 &gt;</p>
                </div>
                <ul class="cont">
                    <li v-for="item in xxhw" :key="item.id" @click="toDetail(item.id)">
                        <img :src="item.picture" alt="">
                        <p class="name">{{item.name}}</p>
                        <p class="price">￥{{item.price}}</p>
                    </li>
                </ul>
            </div>
            <div class="rqtj">
                <div class="top">
                    <p class="tit">人气推荐<span>人气爆款</span><span>不容错过</span></p>
                </div>
                <ul class="cont">
                    <li v-for="item in rqtj" :key="item.id">
                        <img :src="item.leftIcon" alt="">
                        <p class="name">{{item.title}}</p>
                        <p class="desc">{{item.caption}}</p>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"HomeHaowu",
    data(){
        return {
            xxhw:[],
            rqtj:[]
        }
    },
    async created(){
        const res=await this.$http.homeApi();
        // console.log(res);
        this.xxhw=res.data.result.freshGoods;
        this.rqtj=res.data.result.hotRecommends;
    },
    methods:{
        toDetail(id){
            this.$router.push({
                path:"/details",
                query:{
                    id
                }
            })
        },
    }
}
</script>

<style lang="less" scoped>
.xx{
    width:100%;
    .wrapper{
        padding:0 250px;
        .xxhw,.rqtj{
            .top{
                height:80px;
                line-height:40px;
                display:flex;
                justify-content: space-between;
                .tit{
                    font-size:30px;
                    span{
                        font-size:14px;
                        color:#666;
                        margin-left:6px;
                    }
                }
                .all{
                    color:#666;
                    margin-top:30px;
                }
            }
            .cont{
                list-style:none;
                display:flex;
                justify-content: space-between;
                margin-left:-40px;
                li{
                    width:23%;
                    height:400px;
                    background:#f0f9f4;
                    text-align:center;
                    img{
                        width:100%;
                        height:300px;
                    }
                    .name{
                        height:24px;
                        overflow:hidden;
                        padding:0 10px;
                    }
                    .price{
                        color:#d14444;
                    }
                }
                li:hover{
                    box-shadow:-5px 5px 6px #eaebe9;
                    margin-top:-5px;
                    transition:.3s;
                }
            }
        }
        .rqtj .cont li{
            background:#fff;
            .name{
                font-size:20px;
            }
            .desc{
                font-size:16px;
                color:#666;
            }
        }
    }
}
</style>